<!-- 任务抽屉（包含上传、下载任务） -->
<template>
  <a-drawer
    :open="fileTaskStore.taskListOptions.open"
    class="custom-class"
    :body-style="{ padding: '24px 0' }"
    root-class-name="root-class-name"
    placement="right"
    :closable="false"
    mask-closable
    @close="handleClose"
  >
    <div class="file-task-card">
      <div class="tabs-wrap">
        <ul class="tabs">
          <li
            class="tab-item"
            :class="[fileTaskStore.taskListOptions.key === '1' && 'active']"
            @click="fileTaskStore.changeTaskListOptions({ open: true, key: '1' })"
          >
            上传队列
          </li>
          <li
            class="tab-item"
            :class="[fileTaskStore.taskListOptions.key === '2' && 'active']"
            @click="fileTaskStore.changeTaskListOptions({ open: true, key: '2' })"
          >
            下载队列
          </li>
        </ul>
        <a-button type="text" class="icon-only-btn icon-close-btn" @click="handleClose"><i class="iconfont icon-close-line"></i></a-button>
      </div>
      <div v-show="fileTaskStore.taskListOptions.key === '1'" class="file-task-card-wrap">
        <upload-list />
      </div>
      <div v-show="fileTaskStore.taskListOptions.key === '2'" class="file-task-card-wrap">
        <down-list />
      </div>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
  import DownList from './down-list.vue'
  import UploadList from './upload-list.vue'
  import { useFileTaskStore } from './upload-store'

  const fileTaskStore = useFileTaskStore()

  const emits = defineEmits<{
    (e: 'close'): void
  }>()

  const handleClose = () => {
    fileTaskStore.changeTaskListOptions({ open: false })
    emits('close')
  }
</script>

<style lang="less" scoped>
  .file-task-card {
    display: flex;
    height: 100%;
    flex-direction: column;

    .file-task-card-wrap {
      display: flex;
      overflow: hidden;
      height: 100%;
      flex-direction: column;
    }
  }

  .icon-close-btn {
    position: absolute;
    top: 6px;
    right: 24px;
    z-index: 1;
  }

  .tabs-wrap {
    position: relative;
    padding: 0 24px 20px;
  }

  .tabs {
    display: flex;
    height: 33px;
    gap: 0 40px;

    .tab-item {
      position: relative;
      font-size: 16px;
      color: @text02;
      font-weight: 400;
      line-height: 24px;
      cursor: pointer;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 90%;
        height: 3px;
        background-color: @primary1;
        transform: translate(-50%, 0);
      }

      &.active {
        color: @text01;
        font-weight: 700;

        &::after {
          content: '';
        }
      }
    }
  }
</style>
